<template>
  <div class="system-edit-user-container">
    <el-card shadow="hover">
      <!--  搜索部分    -->
      <div class="system-user-search mb15">
        <el-input size="small"   placeholder="请输入病房名称" style="max-width: 180px"> </el-input>
        <el-button size="small"  type="primary" class="ml10" icon="el-icon-search">查询</el-button>
        <el-button size="small"  type="success" icon="el-icon-folder-add" class="ml10" @click="newHouse" ><el-icon></el-icon>新增病房</el-button>
        <el-button size="small"  type="success" icon="el-icon-folder-add" class="ml10" @click="dialogNewBedVisible = true" ><el-icon></el-icon>新增病床</el-button>
      </div>

      <!--   表格数据   -->
      <el-table :data="houseList" style="width:100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="hihCard" label="病房编号"  show-overflow-tooltip></el-table-column>
        <el-table-column prop="departmentClass.dpcName" label="科室名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="patientNum" label="已住患者数量" show-overflow-tooltip></el-table-column>
        <el-table-column prop="hihStatus" label="病房状态" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.hihStatus == 'y'">启用</el-tag>
            <el-tag type="info" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button  size="small" type="text" @click="newHouse(scope.row)" >修改</el-button>
            <el-button  size="small" type="text" @click="getBedListById(scope.row.hihCard)" >查看病床</el-button>
            <el-button  size="small" type="text"  >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 病床信息 -->
      <el-dialog title="病床信息" :visible.sync="dialogBedVisible">
        <el-table :data="bedList">
          <el-table-column type="index" label="序号" width="150"></el-table-column>
          <el-table-column property="hibCard" label="病床编号" width="200"></el-table-column>
          <el-table-column property="hibPrice" label="病床价格"></el-table-column>
          <el-table-column prop="hibStatus" label="病房状态" show-overflow-tooltip>
            <template #default="scope">
              <el-tag type="info" v-if="scope.row.hibStatus == 'n'">未住</el-tag>
              <el-tag type="success" v-else>已住</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button  size="small" type="text" :disabled="scope.row.hibStatus=='y'" @click="" >申请入住</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>

      <!--  新增病房    -->
      <el-dialog  :title="title"  :before-close="DialogCloseBed" :visible.sync="dialogNewHouseVisible" width="769px">
        <el-form  size="mini" label-width="90px">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病房编号">
                <el-input v-model="house.hihCard" placeholder="请输入病房编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="科室名称">
                <el-select v-model="house.dpcId"  placeholder="请选择科室" clearable class="w100">
                  <el-option v-for="deptClass in deptClassList" :label="deptClass.dpcName" :value="deptClass.dpcId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病房状态">
                <el-switch v-model="house.hihStatus" active-value="y"  inactive-value="n" inline-prompt active-text="启" inactive-text="禁"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
				<span class="dialog-footer">
					<el-button  size="mini" >取 消</el-button>
					<el-button type="primary" @click="submitHouse" size="mini">确 定</el-button>
				</span>
        </template>
      </el-dialog>


      <!--  新增病床   -->
      <el-dialog  title="新增病床" :before-close="DialogCloseBed" :visible.sync="dialogNewBedVisible" width="769px">
        <el-form  size="mini" label-width="90px">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病床编号">
                <el-input v-model="bed.hibCard" placeholder="请输入病床编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="病房编号">
                <el-select v-model="bed.hihCard"  placeholder="请选择病房编号" clearable class="w100">
                  <el-option v-for="house in houseList" :label="house.hihCard" :value="house.hihCard"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病床价格">
                <el-input v-model="bed.hibPrice" placeholder="请输入病床价格" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病房状态">
                <el-switch v-model="bed.hibStatus" active-value="y"  inactive-value="n" inline-prompt active-text="已住" inactive-text="未住"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
				<span class="dialog-footer">
					<el-button  size="mini" >取 消</el-button>
					<el-button type="primary" @click="newBed" size="mini">确 定</el-button>
				</span>
        </template>
      </el-dialog>


      <!--  入院申请   -->
      <el-dialog  title="入院申请" :visible.sync="dialogHospVisible" width="769px">
        <el-form  size="mini" label-width="90px">
          <el-row :gutter="35">
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病床编号">
                <el-input v-model="hosp.hibCard" placeholder="请输入病床编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <el-form-item label="病房编号">
                <el-select v-model="hosp.hihCard"  placeholder="请选择病房编号" clearable class="w100">
                  <el-option v-for="house in houseList" :label="house.hihCard" :value="house.hihCard"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病床价格">
                <el-input v-model="hosp.hibPrice" placeholder="请输入病床价格" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
              <el-form-item label="病房状态">
                <el-switch v-model="hosp.hibStatus" active-value="y"  inactive-value="n" inline-prompt active-text="已住" inactive-text="未住"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <template #footer>
				<span class="dialog-footer">
					<el-button  size="mini" >取 消</el-button>
					<el-button type="primary" size="mini">确 定</el-button>
				</span>
        </template>
      </el-dialog>
    </el-card>
  </div>

</template>

<script>
import house from "@/api/house";
import bed from "@/api/bed";
import equipment from "@/api/equipment";

export default {
  name: "houseList",
  data(){
    return{
      title: "",  // 新增病房对话框的title
      houseList: [], //病房集合
      dialogBedVisible: false,  //查看病床对话框显示
      dialogNewHouseVisible: false, // 新增病房对话框显示
      dialogNewBedVisible: false, // 新增病床对话框显示
      dialogHospVisible: false, //  入院申请对话框
      bedList: [],  // 病床集合
      deptClassList: [],  // 科室集合
      house: {},  // 新增病房，表单信息
      bed: {},  // 新增病床，表单信息
      hosp: {}, // 入院申请，表单信息
    }
  },
  methods:{
    // 获取所有病房信息
    getHouseList(){
      house.getHouse().then(resp => {
        this.houseList = resp.data
      })
    },
    // 获取所有科室信息
    getequipmentList(){
      equipment.getDepartmentClassList().then(resp => {
        this.deptClassList = resp.data
      })
    },
    // 根据病房id获取病床
    getBedListById(id){
      this.dialogBedVisible = true
      bed.getBedById(id).then(resp => {
        this.bedList = resp.data
      })
    },
    // 新增病房
    newHouse(house){
      if (house!=undefined){
        this.title = "修改病房"
        this.house = house
      }else{
        this.title = "新增病房"
      }
      this.dialogNewHouseVisible = true
    },
    // 提交病房信息
    async submitHouse() {
      if (this.title == "新增病房") {
        await house.addHouse(this.house).then(resp => {
          this.$message({message: resp.message, type: 'success'});
        })
      } else {
        await house.updateHouse(this.house).then(resp => {
          this.$message({message: resp.message, type: 'success'});
        })
      }
      this.getHouseList()
      this.house = {}
      this.dialogNewHouseVisible = false
    },
    // 提交新增病床信息
    newBed(){
      bed.addHouse(this.bed).then(resp => {
        this.dialogNewBedVisible = false
        this.bed = {
          hibStatus: "n"
        }
        this.$message({message: resp.message,type: 'success'});
      })
    },
    // 关闭对话框清空对象
    DialogCloseBed(done){
      this.bed = {}
      this.house = {}
      done()
    }
  },
  created() {
    this.getHouseList()
    this.getequipmentList()
  },
}
</script>

<style scoped>

</style>